import styles from './index.module.less';
import wechatImg from '../../../assets/wechat.png';
import alipayImg from '../../../assets/alipay.png';
import addressIcon from '../../../assets/Address.svg';
import addressIcon2 from '../../../assets/Address2.svg';
import addressIcon3 from '../../../assets/Address3.svg';
import addressIcon4 from '../../../assets/Address4.svg';
import vectorImg from '../../../assets/vector2.svg';

const Contact = () => {
  return (
    <div className={styles.wrap} id='contact'>
      <div className={styles.container}>
        <div className={styles.title}>Contact US</div>
        <img className={styles.line} src={vectorImg} />
        <div className={styles.content}>
          <div className={styles.qrSection}>
            <div className={styles.qrItem}>
              <img src={wechatImg} className={styles.qrImg} alt="WeChat QR" />
              <div className={styles.qrLabel}>WeChat</div>
            </div>
            <div className={styles.qrItem}>
              <img src={alipayImg} className={styles.qrImg} alt="WhatsApp QR" />
              <div className={styles.qrLabel}>WhatsApp</div>
            </div>
          </div>
          <div className={styles.infoSection}>
            <div className={styles.infoItem}>
              <img src={addressIcon} className={styles.iconImg} alt="icon" />
              <div>
                <div className={styles.infoTitle}>Corporate Name</div>
                <div>Hangzhou Vehiclink Technology Co., Ltd</div>
              </div>
            </div>
            <div className={styles.infoItem}>
              <img src={addressIcon2} className={styles.iconImg} alt="icon" />
              <div>
                <div className={styles.infoTitle}>Telephone/WeChat</div>
                <div>Robin  +86–18814841915 &nbsp;&nbsp; Jason  +86–15215731136</div>
              </div>
            </div>
            <div className={styles.infoItem}>
              <img src={addressIcon3} className={styles.iconImg} alt="icon" />
              <div>
                <div className={styles.infoTitle}>Mailbox</div>
                <div>robin@vehiclink.com &nbsp;&nbsp; jason@vehiclink.com</div>
              </div>
            </div>
            <div className={styles.infoItem}>
              <img src={addressIcon4} className={styles.iconImg} alt="icon" />
              <div>
                <div className={styles.infoTitle}>Address</div>
                <div>Room 606A, Building 9, Xixi Bafangcheng, Wuchang Subdistrict,Yuhang District, Hangzhou, China</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default Contact;